<template>
    <div class="table">
        <div class="table-tool">
            <div class="title">{{ title }}</div>
            <div class="tool">
                <a-button @click="doExport" type="primary" v-if="isExport"
                    ><vertical-align-bottom-outlined />导出
                </a-button>
                <a-button type="primary" @click="emit('handleAdd')"
                    ><plus-outlined />新建
                </a-button>
                <a-tooltip placement="top">
                    <template #title>
                        <span>刷新</span>
                    </template>
                    <reload-outlined @click="reFresh" />
                </a-tooltip>
                <a-dropdown :trigger="['click']" placement="bottom">
                    <div @click.prevent>
                        <a-tooltip placement="top">
                            <template #title>
                                <span>密度</span>
                            </template>
                            <column-height-outlined />
                        </a-tooltip>
                    </div>
                    <template #overlay>
                        <a-menu>
                            <a-menu-item v-for="item in sizeList" :key="item.value">
                                <p
                                    @click="changSize(item.value)"
                                    :style="{ color: tableSize === item.value ? '#1890ff' : '' }"
                                >
                                    {{ item.text }}
                                </p>
                            </a-menu-item>
                        </a-menu>
                    </template>
                </a-dropdown>
                <a-popover trigger="click" placement="bottomRight">
                    <template #content>
                        <a-checkbox-group v-model:value="checkList" @change="changeFn">
                            <transition-group>
                                <div
                                    class="check-item"
                                    style="
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        padding: 5px 0;
                                    "
                                    v-for="(item, index) in tableColumns.list"
                                    :key="item.title"
                                    :draggable="true"
                                    @dragstart="dragstart(item)"
                                    @dragenter="dragenter(item, $event)"
                                    @dragend="dragend(item, $event)"
                                    @dragover="dragover($event)"
                                >
                                    <pic-right-outlined class="icon" />
                                    <a-checkbox
                                        :value="item"
                                        style="width: 100px; margin-left: 10px"
                                    >
                                        <div>{{ item.title }}</div>
                                    </a-checkbox>
                                    <a-tooltip placement="top">
                                        <template #title>
                                            <span>上移</span>
                                        </template>
                                        <vertical-align-top-outlined
                                            @click="goUporDown(1, index)"
                                            class="icon"
                                        />
                                    </a-tooltip>
                                    <a-tooltip placement="top">
                                        <template #title>
                                            <span>下移</span>
                                        </template>
                                        <vertical-align-bottom-outlined
                                            @click="goUporDown(2, index)"
                                            class="icon"
                                        />
                                    </a-tooltip>
                                </div>
                            </transition-group>
                        </a-checkbox-group>
                    </template>
                    <template #title>
                        <div
                            style="
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                            "
                        >
                            <a-checkbox
                                v-model:checked="checkAll"
                                :indeterminate="indeterminate"
                                @change="onCheckAllChange"
                            >
                                列展示
                            </a-checkbox>
                            <a-button type="link" @click="resetChecked">重置</a-button>
                        </div>
                    </template>
                    <a-tooltip placement="top">
                        <template #title>
                            <span>列设置</span>
                        </template>
                        <setting-outlined />
                    </a-tooltip>
                </a-popover>
            </div>
        </div>
        <a-table
            :size="tableSize"
            :dataSource="data"
            :columns="columns"
            :loading="loading"
            :pagination="false"
        >
            <template #bodyCell="{ column, text, record }">
                <slot name="content" :column="column" :text="text" :record="record"></slot>
            </template>
        </a-table>
    </div>
</template>
<script>
export default {
    name: 'TableTool'
}
</script>
<script setup>
import { defineProps, defineEmits, ref, getCurrentInstance, reactive } from 'vue'
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    data: {
        type: Array
    },
    columns: {
        type: Array
    },
    loading: {
        type: Boolean
    },
    isExport: {
        type: Boolean,
        default: false
    }
})
const { proxy: _this } = getCurrentInstance()
const emit = defineEmits(['reFresh', 'update:columns', 'handleAdd'])
//默认大小
const tableSize = ref('middle')
//表格大小的数组
const sizeList = [
    { value: 'default', text: '默认' },
    { value: 'middle', text: '中等' },
    { value: 'small', text: '紧凑' }
]
//修改数组大小的方法
const changSize = (value) => {
    tableSize.value = value
}

const reFresh = () => {
    emit('reFresh')
}
//列操作 start
const checkAll = ref(true)
const indeterminate = ref(false)
const checkList = ref([])
//全选改变的方法
const onCheckAllChange = (e) => {
    if (e.target.checked) {
        checkList.value = tableColumns.list
        emit('update:columns', checkList.value)
    } else {
        checkList.value = []
        emit('update:columns', checkList.value)
    }
    indeterminate.value = false
}
//option 实际渲染的数组
const tableColumns = reactive({
    list: _this.$global.deepClone(props.columns),
    initialList: _this.$global.deepClone(props.columns)
})
//默认给全部选中
checkList.value = tableColumns.list
//单选影响全选
const changeFn = (val) => {
    let len = val.length
    indeterminate.value = !!len && len < tableColumns.list.length
    checkAll.value = len === tableColumns.list.length
    //取出两个数组相同的元素
    const arr = tableColumns.list.filter((v) => {
        return val.indexOf(v) !== -1
    })
    emit('update:columns', arr)
}
//重置选中状态   默认全部选中
const resetChecked = () => {
    checkList.value = tableColumns.list
    emit('update:columns', checkList.value)
    checkAll.value = true
    indeterminate.value = false
}

//列操作 end
//拖拽start
const newItem = ref(null)
const oldItem = ref(null)
// 鼠标拖动当前元素时触发
const dragstart = (item) => {
    oldItem.value = item
}
// 鼠标松开进入某个容器时触发
const dragenter = (item, e) => {
    newItem.value = item
}
// 鼠标完成拖动后触发
const dragend = (item, e) => {
    if (newItem.value === oldItem.value) return
    //拿到旧节点的index
    let oldIndex = tableColumns.list.indexOf(oldItem.value)
    // 拿到新节点index
    let newIndex = tableColumns.list.indexOf(newItem.value)
    tableColumns.list.splice(oldIndex, 1) // 先删
    tableColumns.list.splice(newIndex, 0, oldItem.value) // 再增
    emit('update:columns', tableColumns.list)
}
const dragover = (e) => {
    // 禁止默认事件触发
    e.preventDefault()
}
const goUporDown = (type, index) => {
    if (type === 1 && index > 0) {
        let list = tableColumns.list.splice(index, 1) // 先删除
        tableColumns.list.splice(index - 1, 0, list[0]) // 再增
    } else if (type === 2 && index < tableColumns.list.length - 1) {
        let list = tableColumns.list.splice(index, 1)
        tableColumns.list.splice(index + 1, 0, list[0])
    }
    emit('update:columns', tableColumns.list)
}
//拖拽end
const doExport = () => {
    import('@/vendor/Export2Excel.js').then((excel) => {
        const tHeader = props.columns.map((v) => v.title)
        const filterVal = props.columns.map((v) => v.dataIndex)
        const list = props.data
        const data = formatJson(filterVal, list)
        excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: props.title,
            autoWidth: true,
            bookType: 'xlsx'
        })
    })
}
const formatJson = (filterVal, jsonData) => {
    return jsonData.map((v) => filterVal.map((j) => v[j]))
}
</script>
<style scoped lang="scss">
.table {
    .table-tool {
        background-color: #fff;
        padding: 20px;
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
            font-size: 20px;
        }
        .tool {
            width: 240px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
.icon {
    color: #ddd;
    cursor: pointer;
    margin-right: 10px;
}
.check-item {
    padding: 20px;
    background-color: #fff;
}
.check-item :hover {
    color: #1890ff;
}
</style>
